<template>
  <a-space>
    <e-flag v-if="code" size="small" :code="code" />
    <span>{{ Utils.transformNullValue(countryName) }}</span>
  </a-space>
</template>

<script setup>
import { ref, watch } from 'vue'
import EFlag from '@/components/EFlag.vue'
import { useStore } from 'vuex'
import { useDict } from '@/hooks/useDict.js'
import Utils from '@/utils'
const props = defineProps({
  code: Number
})
const countryName = ref('')
const store = useStore()
const dict = useDict(store)
const getName = () => {
  store.dispatch('dict/getCountriesOrRegions').then(() => {
    const countryOrRegion = dict.value.countriesOrRegions.find(item => item.value === props.code)
    countryName.value = countryOrRegion ? countryOrRegion.text : ''
  })
}
getName()
watch(
  () => props.code,
  () => {
    getName()
  }
)
</script>

<style scoped></style>
